<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例_深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    <!--
        深度监测：
            1.vue中watch默认只监测多级结构的最外层的属性值变化
            2.deep:true可以开启多级结构的内层属性值变化
        备注：
            1、Vue自身可以监测对象内部值得变化，但Vue提供的watch默认不行
            2、使用watch时根据实际情况决定是否开启deep
    -->
    <h2>a的值++后为：{{numbers.a}}</h2>
    <button @click="numbers.a++">点击a++</button>
    <h2>b的值++后为：{{numbers.b}}</h2>
    <button @click="numbers.b++">点击b++</button>

</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        //data的函数式写法
        data() {
            return {
                isHot: true,
                numbers:{
                    a:1,
                    b:1
                }
            }
        },
        //定义计算属性
        computed: {
            info() {
                return this.isHot ? '凉爽' : '炎热'
            }
        },
        methods: {
            changeWeather: function () {
                this.isHot = !this.isHot
            }
        },
        // 定义监视属性
        watch: {
            isHot: {
                immediate:true,//初始化时让handler调用一下
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            },
            // //监视多级结构中某个属性变化
            // 'numbers.a':{
            //     handler() {
            //         console.log('a被修改了')
            //     }
            // },
            // 'numbers.b':{
            //     handler() {
            //         console.log('b被修改了')
            //     }
            // }
            //监听多级结构中所有属性变化
            numbers:{
                deep:true,
                handler() {
                    console.log('numbers被修改了')
                }
            }
        }
    })

    vm.$mount('#root')
</script>
</html>